'use client';

import React, { useMemo, useState } from 'react';
import { Button, Tag, Divider, Tabs, Space } from 'antd';
import { DownOutlined, UpOutlined, TagsOutlined } from '@ant-design/icons';
import { tags as TAGS_DATA } from '../utils/tags';

export interface TagsToggleProps {
  onSelect: (english: string) => void;
  buttonText?: string;
  className?: string;
  defaultExpanded?: boolean;
  maxHeight?: number | string;
}

const TagsToggle: React.FC<TagsToggleProps> = ({
  onSelect,
  buttonText = '标签',
  className = '',
  defaultExpanded = false,
  maxHeight = 420
}) => {
  const [expanded, setExpanded] = useState<boolean>(defaultExpanded);

  const data = useMemo(() => TAGS_DATA, []);

  return (
    <div className={className}>
      <Button
        type="primary"
        icon={<TagsOutlined />}
        onClick={() => setExpanded(v => !v)}
      >
        {expanded ? '收起' : '展开'}{buttonText}
        {expanded ? <UpOutlined style={{ marginLeft: 8 }} /> : <DownOutlined style={{ marginLeft: 8 }} />}
      </Button>

      {expanded && (
        <div
          style={{
            marginTop: 12,
            border: '1px solid rgba(255,255,255,0.1)',
            borderRadius: 8,
            padding: 12,
            maxHeight,
            overflow: 'auto',
            background: 'rgba(0,0,0,0.2)'
          }}
        >
          <Tabs
            tabPosition="top"
            items={data.map((section, sIdx) => ({
              key: `${sIdx}`,
              label: <span style={{ fontWeight: 600 }}>{section.name}</span>,
              children: (
                <div>
                  <Divider style={{ margin: '8px 0' }} />
                  <Tabs
                    tabPosition="top"
                    type="line"
                    items={(section.groups || []).map((group, gIdx) => ({
                      key: `${sIdx}-${gIdx}`,
                      label: (
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                          <span
                            style={{
                              width: 8,
                              height: 8,
                              borderRadius: 2,
                              background: group.color || 'transparent',
                              boxShadow: group.color ? '0 0 0 1px rgba(255,255,255,0.15) inset' : undefined
                            }}
                          />
                          {group.name}
                        </span>
                      ),
                      children: (
                        <div style={{ paddingTop: 8 }}>
                          <Space size={[8, 8]} wrap>
                            {Object.entries(group.tags || {}).map(([en, cn]) => (
                              <Tag
                                key={`${group.name}-${en}`}
                                style={{ cursor: 'pointer' }}
                                color={group.color ? undefined : 'default'}
                                onClick={() => onSelect(en)}
                              >
                                {cn || en}
                              </Tag>
                            ))}
                          </Space>
                        </div>
                      )
                    }))}
                  />
                </div>
              )
            }))}
          />
        </div>
      )}
    </div>
  );
};

export default TagsToggle;